{% extends "header.html" %}
{% load  web_tag %}
{% block conten %}

<div class="row-fluid hideInIE8 circleStats" style="width: 1120px;margin-left: 20px;">


<div class="span2 noMargin" onTablet="span4" onDesktop="span2" style="width:20%">
 <div class="circleStatsItemBox greenDark">
   <div class="header"></div>
   <div style="margin-top: 10px;font-size: 30px;border: none;background-image: none;font-family: Arial;font-weight: bold;text-align: center;color: rgba(255, 255, 255, 0.901961);align-content: center;">{{all_vm_list.vm_name}}</div>
   <div style="background: rgba(0,0,0,0.1);color: rgba(255,255,255,0.9);width: 100%;height: 20px;padding: 5px 0px;position: absolute;bottom: 0px;"> {% vmware_date all_vm_list.create_time %} </div>
   <div style="margin-top:10px;">{{all_vm_list.system_version}}</div>
   <div>IP:{{all_vm_list.ip}}</div>
</div>
</div>




<div class="span2 noMargin" onTablet="span4" onDesktop="span2">
 <div class="circleStatsItemBox pink">
   <div class="header">CPU</div>
    <span class="percent">percent</span>
    <div class="circleStat">
     <input type="text" value="45" class="whiteCircle" />
    </div>
    <div class="footer">
    <span class="count">
        <span class="number">64</span>
        <span class="unit">GHz</span>
        </span>
    <span class="sep"> / </span>
     <span class="value">
     <span class="number">3.2</span>
     <span class="unit">GHz</span>
    </span>	
    </div>
</div>
</div>

<div class="span2" onTablet="span4" onDesktop="span2">
 <div class="circleStatsItemBox orange">
<div class="header">Memory</div>
<span class="percent">percent</span>
<div class="circleStat">
<input type="text" value="{% vmware_memory use.memory_use all_vm_list.memory %}" class="whiteCircle" />
</div>
<div class="footer">
<span class="count">
<span class="number">64</span>
<span class="unit">GB</span>
</span>
<span class="sep"> / </span>
<span class="value">
<span class="number">{{all_vm_list.memory}}</span>
<span class="unit">GB</span>
</span>	
</div>
</div>
</div>
{% for disk in disks %}
<div class="span2" onTablet="span4" onDesktop="span2">
<div class="circleStatsItemBox green">
<div class="header">Disk Space Usage</div>
<span class="percent">percent</span>
<div class="circleStat">
<input type="text" value="{% vmware_chufa disk.used disk.total %}" class="whiteCircle" />
</div>		
<div class="footer">
<span class="count">
<span class="number">10</span>
<span class="unit">GB</span>
</span>
<span class="sep"> / </span>
<span class="value">
<span class="number">{{disk.total}}</span>
<span class="unit">GB</span>
</span>	
</div>
</div>
</div>
{% endfor %}



</div>
{% endblock %}